<template name='pubic'>
    <view>
        <u-sticky>
            <view class="navtop">
                <view class="status_bar">
                    <!-- 这里是状态栏 -->
                </view>
                <view class="toptitle">
                    公益救助
                </view>
            </view>
        </u-sticky>
        <view class="board">
            <view class="img">
                <image src="http://222.135.140.20:9000/ob-psy/2022/12/19/1dc2d602919048948c07639a9c63f9a3.png"></image>
                <view class="boardbox">
                    <view class="title">
                        <view class="left">
                            公益援助榜数据看板
                        </view>
                        <view class="right">
                            更新时间 {{map.updateTime}}
                        </view>
                    </view>
                    <view class="statisticsbox">
                       <view class="statistics">
                           <view>
                               {{map.helpPeople}}
                           </view>
                           <text>
                               累计服务（人）
                           </text>
                       </view>
                       <view class="statistics">
                           <view class="view2">
                              {{map.freeTime}}
                           </view>
                           <text>
                               公益服务时长 （小时）
                           </text>
                       </view>
                       <view class="statistics">
                           <view  class="view3">
                               {{map.people}}
                           </view>
                           <text>
                              公益咨询师（位）
                           </text>
                       </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="expertbox">
            <view class="title">
               公益咨询师
            </view>
			<view class="" style="text-align: center;margin-top: -30rpx;" v-if="adviserList.length === 0">
				<image src="../../static/no.png" mode="scaleToFill"
					style="margin-top: 100rpx;width: 300rpx;height: 300rpx;"></image>
				<view class="" style="color: #999;font-size: 28rpx;margin-top: 20rpx;">
					暂无记录
				</view>
			</view>
            <view class="expert"  v-for="(item, index) in adviserList" :key="index">
                <view class="left">
                    <view class="image">
                        <image :src="item.wxAvatar"></image>
                    </view>
                    <view class="message">
                        <view class="name">
                            {{item.realName}}
                        </view>
                       <text class="label">
                           {{item.levelShow}}
                       </text>
                       <view class="help">
                           <text>帮助人数</text>  {{item.helpPeople}}
                       </view>
                    </view>
                </view>
                <view class="right">
                    <image v-if="item.workType == 0" src="../../static/pubic/phone.png" mode="" @click="toCall(item)"></image>
                    <image v-else src="../../static/pubic/fuwuz.png" mode=""></image>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import {
  getAdviserListHelpKanban,
  getAdviserList, publicAssistanceCall
} from '../../api/api.js'
    export default {
        name: 'pubic',
        props: {
      	     cur: String,
        },
        components: {

        },
        data() {
            return {
				map:{},
				adviserList:[]
            }
        },
        created() {
			//查询公益看板
			getAdviserListHelpKanban().then(res=>{
				this.map = res.data
			})
			//查询公益咨询师
			getAdviserList().then(res=>{
				this.adviserList = res.rows
			})
        },
        mounted() {


        },

        methods: {
          toCall(item) {
            console.log('item', item)
            let data = {
              phone: item.phonenumber
            }
            publicAssistanceCall(data).then(res => {
              uni.navigateTo({
                url: '/pages/myorder/phone'
              })
            })

          }

        },
    };
</script>
<style>
    page{
        background-color: #F6F6F6;
    }
</style>
<style scoped lang="scss">
    .navtop{
         background-color: #fff;
        .status_bar {
                    height: var(--status-bar-height);
                    width: 100%;
                }
        .toptitle{
            padding: 20rpx 0;
            font-size: 34rpx;
            color: #000;
            text-align: center;
        }
    }
    .board{
        .img{
            padding-bottom: 60rpx;
            position: relative;
            image{
                width: 100vw;
                height: 616rpx;
            }
            .boardbox{
                width: 92vw;
                position: absolute;
                left: 4vw;
                bottom: 0;
                padding: 38rpx;
                border-radius: 10rpx;
                background-color: #fff;
                .title{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left{
                        font-size: 32rpx;
                        color: #333;
                    }
                    .right{
                        color: #999;
                        font-size: 22rpx;
                    }
                }
                .statisticsbox{
                    margin: 50rpx 0 10rpx;
                    display: flex;
                    justify-content: space-between;
                    .statistics{
                        width:200rpx;
                        text-align: center;
                        view{
                            font-size: 48rpx;
                            font-weight: bold;
                            color: #F9485E;
                            margin-bottom: 20rpx;
                        }
                        .view2{
                            color: #26D4FF;
                        }
                        .view3{
                            color: #0C7E82;
                        }
                        text{
                           font-size: 26rpx;
                            color: #333;
                            line-height: 35rpx;
                        }
                    }
                }
            }

        }
    }
    .expertbox{
        width: 92vw;
        margin: 30rpx auto;
        padding: 20rpx;
        background-color: #fff;
        border-radius: 10rpx;
        .title{
            margin: 20rpx;
            font-size: 32rpx;
            color: #333;
        }
        .expert{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30rpx;
            .left{
                display: flex;
                .image{
                    width: 160rpx;
                    height: 160rpx;
                    font-size: 0;
                    margin-right: 30rpx;
                    image{
                        width: 160rpx;
                        height: 160rpx;
                    }
                }
                .message{
                    .name{
                        font-size: 30rpx;
                        font-weight: bold;
                    }
                    .label{
                       color: #E65943;
                       border: 1rpx solid #E65943;
                       border-radius: 50rpx;
                       font-size: 20rpx;
                       padding: 0 20rpx;
                       display: inline-block;
                       margin: 20rpx 0;
                    }
                    .help{
                        margin-top: 25rpx;
                        color: #333;
                        font-size: 24rpx;
                        text{
                            color: #999;
                        }
                    }
                }
            }
            .right{
                image{
                    width: 72rpx;
                    height: 72rpx;
                }
            }
        }
    }
</style>
